<template>
  <div class='container'>

    <el-card shadow="always">
      <div class="top">
        <!-- 左侧说明文字 -->
        <span class="introduce">说明：目前支持学科和关键字条件筛选</span>
        <!-- 右侧“新增试题按钮” -->
        <el-button type="success" class="button" size="small" @click="jumpToAdd"><i class="el-icon-edit"></i>新增试题</el-button>
      </div>
       <!-- 搜索  表单 -->
       <!-- <el-form label-width="80px" size="small">
        </el-form> -->
        <el-form label-width="80px" size="small" :model="searchForm">

          <!-- 第一行搜索框 -->
          <el-row >
            <el-col :span="6">
              <el-form-item label="学科">
              <el-select placeholder="请选择" v-model="requestParams.subjectID">
                <el-option
                  v-for="item in objectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="二级目录">
              <el-select  placeholder="请选择" v-model="requestParams.catalogID">
                <el-option
                v-for="item in directoryOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"></el-option>
              </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="标签">
              <el-select  placeholder="请选择" v-model="requestParams.tags">
                <el-option
                v-for="item in requestParams.tags"
                :key="item.value"
                :label="item.label"
                :value="item.value"></el-option>

              </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input  placeholder="根据题干搜索" v-model="requestParams.keyword" label-width="200px"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第二行搜索框 -->
          <el-row  >
            <el-col :span="6">
              <el-form-item label="试题类型">
              <el-select placeholder="请选择" v-model="requestParams.questionType">
                <el-option v-for="item in questionTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="难度">
              <el-select  placeholder="请选择" v-model="requestParams.difficulty">
                <el-option v-for="item in difficulty" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="方向">
              <el-select placeholder="请选择" v-model="requestParams.direction">
                <el-option
                v-for="item in direction"
                :key="item"
                :label="item"
                :value="item">
                </el-option>
              </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="录入人">
              <el-select  placeholder="请选择" v-model="requestParams.creatorID">
                <el-option
                v-for="item in userOptions"
                :key="item.id"
                :label="item.username"
                :value="item.id">
                </el-option>
              </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第三行搜索框 -->
          <el-row  >
            <el-col :span="6">
              <el-form-item label="题目备注">
               <el-input  placeholder="根据题干搜索" v-model="searchForm.two"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="企业简称">
                <el-input  placeholder="根据题干搜索" v-model="searchForm.two"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="城市">
              <el-select  placeholder="请选择" v-model="requestParams.province">
                <el-option
                v-for="item in cityOptions"
                :key="item"
                :label="item"
                :value="item">
                </el-option>
              </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item>
                <el-button @click="clear()">清除</el-button>
                <el-button type="primary" @click="search()">搜索</el-button>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>

      <!-- tab栏 -->
        <el-tabs v-model="requestParams.chkState" type="card" @tab-click="handleTab">
          <el-tab-pane label="全部" name="all">
          </el-tab-pane>

          <el-tab-pane label="待审核" name="0">
          </el-tab-pane>

          <el-tab-pane label="已审核" name="1">
          </el-tab-pane>

          <el-tab-pane label="已拒绝" name="2">
          </el-tab-pane>
        </el-tabs>

        <!-- 数据记录 -->
      <el-alert
        :title="`数据一共 ${total} 条`"
        style="margin-bottom:15px"
        type="info"
        class="alert"
        :closable="false"
        show-icon
      ></el-alert>

        <el-table
              :data="allQuestionInfo"
              border
              height="250"
              style="width: 100%">

              <el-table-column
                prop="number"
                label="试题编号"
                width="150">
              </el-table-column>

              <el-table-column
                prop="subject"
                label="学科"
                width="120">
              </el-table-column>

              <el-table-column
                prop="catalog"
                label="目录"
                width="120">
              </el-table-column>

              <el-table-column
                label="题型"
                width="120">
                <template #default={row}>
                  {{questionType.find(item => item.value === +row.questionType).label}}
                </template>
              </el-table-column>

              <el-table-column
                prop="question"
                label="题干"
                width="300">
                <template #default="{row}">
                  <div v-html="row.question"></div>
                </template>
              </el-table-column>

              <el-table-column
                label="录入时间"
                width="180">
                <template #default="{row}">
                  {{row.addDate|parseTimeByString}}
                </template>
              </el-table-column>

              <el-table-column
                prop="creator"
                label="录入人"
                width="120">
              </el-table-column>

              <el-table-column
                prop="chkState"
                label="审核状态"
                width="120">
                <template #default={row}>
                  <!-- {{status.find(item => item.value === +row.status).label}} -->
                  {{row.chkState|state_chk}}
                </template>
              </el-table-column>

              <el-table-column
                prop="chkRemarks"
                label="审核意见"
                width="120">
              </el-table-column>

              <el-table-column
                prop="chkUser"
                label="审核人"
                width="120">
              </el-table-column>

              <el-table-column
                prop="publishState"
                label="发布状态"
                width="120">
                <template #default={row}>
                  <!-- {{status.find(item => item.value === +row.status).label}} -->
                  {{row.publishState|publishState}}
                </template>
              </el-table-column>

              <el-table-column
                fixed="right"
                label="操作"
                width="300">
                <template slot-scope="{row}">

                  <el-button @click="handlePreview(row)" type="text" size="small">预览</el-button>
                  <el-button type="text" size="small" disabled>审核</el-button>
                  <el-button type="text" size="small" @click="jumpToAdd">修改</el-button>
                  <el-button type="text" size="small" @click="togglePublish(row)">{{row.publishState === 1 ? '上架' : '下架'}}</el-button>
                  <el-button type="text" size="small" @click="del(row)">删除</el-button>
                </template>
              </el-table-column>

        </el-table>

        <!-- 分页器 -->
        <!-- hide-on-single-page => 只有一页时隐藏 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 2, 3, 4, 5, 6]"
          :page-size="pageSzie"
          layout="total,sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>

    </el-card>
    <!-- 预览弹窗 -->
    <DetailPreview
    :dialogVisible.sync="dialogVisible"
    :detailInfo="detailInfo"
    :test="test">
    </DetailPreview>
  </div>
</template>

<script>
// import ChoiceTable from '../components/ChoiceTable.vue'
import DetailPreview from '../components/DetailPreview.vue'
import { choice, remove, choicePublish } from '@/api/hmmm/questions.js'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { simple } from '@/api/hmmm/subjects'
import { simple as directoryList } from '@/api/hmmm/directorys'
import { simple as userList } from '@/api/base/users'
import { provinces as getCity } from '@/api/hmmm/citys'
//  , citys as getArea
export default {
  components: {
    DetailPreview
  },
  data () {
    return {
      dialogVisible: false,
      activeName: 'first',
      total: 0,
      currentPage: 1,
      pageSzie: 4,
      test: 777,
      difficulty,
      questionType,
      direction,
      userOptions: [],

      directoryOptions: [],
      cityOptions: getCity(),
      // 所有数据
      allQuestionInfo: [],
      questionTypeOptions: questionType,

      objectList: [],
      requestParams: {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        page: 1,
        pagesize: 5,
        chkState: 'all'
      },
      // 单个详情
      detailInfo: {},
      questions: [],
      searchForm: {
        one: [],
        two: ''
      }
    }
  },
  async created () {
    const { data } = await simple()
    // console.log(data)
    this.objectList = data
    this.getdirectoryArr()
    this.getQuestionInfo()
    // console.log(this.allQuestionInfo)
    const { data: userArr } = await userList()
    this.userOptions = userArr
  },
  filters: {
    state_chk (val) {
      if (val === 0) return '待审核'
      if (val === 1) return '已审核'
      if (val === 2) return '已拒绝'
    },
    publishState (val) {
      if (val === 0) return '已发布'
      if (val === 1) return '已下架'
      if (val === 2) return '待发布'
    }
  },
  methods: {
    // 获取列表
    async getQuestionInfo () {
      const params = { ...this.requestParams }
      if (params.chkState === 'all') params.chkState = null
      const { data: { counts, items } } = await choice(params)
      // const { data: { counts, items } } = await choice(params)
      // console.log(items)
      this.total = counts
      this.allQuestionInfo = items
      // console.log(this.allQuestionInfo)
      // console.log(this.allQuestionInfo)
      // console.log(this.currentPage, this.pageSzie)
    },

    handleTab () {
      this.requestParams.page = 1
      this.getQuestionInfo()
    },

    async getdirectoryArr (subjectID) {
      const { data: directoryArr } = await directoryList({ subjectID })
      this.directoryOptions = directoryArr
    },

    // 搜索
    search () {
      this.requestParams.page = 1
      this.getQuestionInfo()
    },
    // 上下架
    togglePublish (question) {
      this.$confirm('确认操作', '上/下架', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        question.publishState = question.publishState === 1 ? 0 : 1
        const res = await choicePublish(question)
        console.log(res)
        this.getQuestionInfo()
        // this.$message.success('删除成功')
      }).catch(() => {
        // this.$message.success('删除取消')
      })
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.currentPage = val
      this.getQuestionInfo()
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.pageSzie = val
      this.currentPage = 1
      this.getQuestionInfo()

      /* const { data: { items } } = await choice(this.currentPage, this.pageSzie)
      this.allQuestionInfo = items */
    },
    handleClick (tab, event) {
      // console.log(tab, event)
    },

    // 预览
    async handlePreview (row) {
      this.dialogVisible = true
      // console.log(this.detailInfo)
      this.detailInfo = row
    },
    clear () {
      for (const key in this.requestParams) {
        if (key !== 'page' && key !== 'pagesize') this.requestParams[key] = null
      }
    },
    // 删除
    del (row) {
      this.$confirm('真的要删除吗', '确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await remove(row)
        console.log(res)
        this.getQuestionInfo()
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message.success('删除取消')
      })
    },

    // 点击顶部'新增试题'
    jumpToAdd () {
      this.$router.push({ name: 'questions-new' })
    },

    // 点击子组件 "修改" 按钮  跳转至 "试题录入"
    changeInfo () {
      this.jumpToAdd()
    }

  }
}
</script>

<style scoped lang='scss'>
.container {
  padding: 15px 10px 10px 10px;
  .top {
    margin-bottom: 25px;
    .introduce{
    font-size: 12px;
    color: pink;
  }
  .button {
    float: right;
  }
  }
}
.elRow {
  margin-bottom: 20px;
}
</style>
